<!--
* description: 调拨计划创建-新增编辑
-->
<template>
  <section class="editCarBrand">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :title="textMap[popupsState]"
      :append-to-body="true"
      :visible.sync="curPopupsVisible"
      @close="sendCode"
      width="1000px"
    >
      <dialogHeader
        slot="title"
        :title="textMap[popupsState]"
        :styleType="$store.state.app.dialogType"
      ></dialogHeader>
      <div class="filter-container filter-params">
        <el-row :gutter="26">
          <component
            v-for="comp in tableComponents.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire+ comp.compKey : comp.compKey"
            :validrule="comp.validrule"
            :key="comp.compKey"
            :codeField="comp.codeField"
            :textField="comp.textField"
            :popupsKey="comp.compKey"
            :is="comp.component"
            :code="formField[comp.codeField]"
            :text="formField[comp.textField]"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
            :disabled="comp.disabled"
            :isRequire="comp.isRequire"
            :span="comp.span || 8"
            :isMul="comp.isMul"
            :labelName="comp.labelName"
            :readonly="comp.readonly"
            :showPlaceholder="comp.showPlaceholder"
            :dateOptionsType="comp.dateOptionsType"
            :options="comp.options"
            :isInput="comp.isInput"
          />
        </el-row>
        <el-row :gutter="34" style="margin-bottom:5px;">
          <el-col :span="24">
            <div class="dialogTitle">
              <span class="dialogTitleButton">
                <el-button
                  class="iconfont icon-newlyAdded"
                  @click="tableDataAdd"
                  v-if="this.popupsState === 'edit' ?false:true"
                >选择备件</el-button>
                <el-button class="iconfont icon-newlyAdded" @click="save">全部保存</el-button>
              </span>
            </div>
          </el-col>
        </el-row>
        <!-- 表格 -->
        <el-row :gutter="34" style="margin-bottom:5px;">
          <el-col :span="24">
            <el-table
              :data="tableData"
              style="width: 100%"
              height="300"
              border
              v-loading="listLoading"
            >
              <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="120"
                v-if="this.popupsState === 'edit' ?false:true"
              >
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    class="el-icon-delete"
                    :underline="false"
                    @click="tableDataDel(scope.$index)"
                    title="删除"
                    style="font-size:12px;"
                  >删除</el-link>
                </template>
              </el-table-column>
              <el-table-column label="备件编号" prop="PART_NO" align="center"></el-table-column>
              <el-table-column label="备件名称" prop="PART_NAME" align="center"></el-table-column>
              <el-table-column label="调拨SNP" prop="SNP_MOVE" align="center"></el-table-column>
              <el-table-column label="源仓库可用库存" prop="SOURCE_QTY" align="center"></el-table-column>
              <el-table-column label="目标仓库可用库存" prop="TARGET_QTY" align="center"></el-table-column>
              <el-table-column label="调拨数量+" align="center">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.ALLOCATION_QTY"
                    type="text"
                    @input="numChange(scope)"
                    style="width:100%;"
                    class="tableTemplate"
                    maxlength="10"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- 表格 -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          @click="comp.clickEvent"
        >{{comp.text}}</el-button>
      </div>
      <editPartQuery
        v-if="isEditShow"
        @PartQueryClose="PartQueryClose"
        @confirmPartQuery="confirmPartQuery"
        :isEditShow="isEditShow"
        :editformField="formField"
        :editTableData="tableData"
      />
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from "@/components/wms/mixins/formMixins";
import { wmsApis } from "@/api/wms/allocation/api";
import storage from "@/utils/storage";
import request from "@/utils/request";
export default {
  // 组件混入对象
  mixins: [formMixins],
  components: {
    dialogHeader: () => import("@/components/dialogHeader"), //弹窗标题
    editPartQuery: () => import("./editPartQuery")
  },
  data() {
    return {
      // 保存API配置对象
      apiConfig: wmsApis.saveAllocation,
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: "btnKey1",
          type: "",
          size: "small",
          clickEvent: () => this.close("1"),
          text: "关闭"
        }
      ],
      // 动态组件-查询条件
      tableComponents: [
        {
          compKey: "edit_compKey1",
          labelName: "源仓库",
          codeField: "SOURCE_WAREHOUSE",
          component: () => import("@/components/wms/dropdownList/dropdownList"),
          change: () => {
             this.tableData = [];
          },
          type: "dropdownList",
          isMust: true,
          options: [],
          isRequire: true,
          disabled: this.popupsState === "edit" ? true : false
        },
        {
          compKey: "edit_compKey2",
          labelName: "目标仓库",
          codeField: "TARGET_WAREHOUSE",
          component: () => import("@/components/wms/dropdownList/dropdownList"),
          change: () => {
            this.tableData = [];
          },
          type: "dropdownList",
          isMust: true,
          options: [],
          isRequire: true,
          disabled: this.popupsState === "edit" ? true : false
        },
        {
          compKey: "edit_compKey3",
          labelName: "预计到货时间",
          codeField: "DELIVERY_TIME",
          component: () => import("@/components/org/datePicker/datePicker"),
          type: "date",
          dateOptionsType: "3",
          isMust: true,
          isRequire: true,
          disabled: this.popupsState === "edit" ? true : false
          
        }
      ],
      // 标题
      textMap: {
        add: "新增调拨计划",
        edit: "编辑调拨计划"
      },
      // 表单数据（无需赋值，由混入对象赋值）
      formField: {
        ALLOCATION_ID: "",
        SOURCE_WAREHOUSE: "",
        DELIVERY_TIME: "",
        TARGET_WAREHOUSE: ""
      },
      //表格数据
      tableData: [],

      // 表格加载字段
      listLoading: false,

      // 控制备件明细弹窗
      isEditShow: false
    };
  },
  methods: {
    onCreated() {
     
      if (this.curPopupsVisible) {
      
        this.querySelect();
        if (this.popupsState === "edit") {

          // // 编辑接口
          request({
            url: "/mp/wm/vl/warehouse/allocation/queryAllocationEdit.do",
            method: "post",
            data: {
              ALLOCATION_ID:this.dynamicEditRowData.ALLOCATION_ID
            }
          }).then(res => {
            if(res.listResult && res.listResult.result === '1') {
              this.tableData = res.listResult.rows
            }
          })

          // this.tableData.push({
          //   PART_NO: this.dynamicEditRowData.PART_NO,
          //   PART_NAME: this.dynamicEditRowData.PART_NAME,
          //   SNP_MOVE: this.dynamicEditRowData.SNP_MOVE,
          //   SOURCE_QTY: this.dynamicEditRowData.SOURCE_QTY,
          //   TARGET_QTY: this.dynamicEditRowData.TARGET_QTY,
          //   ALLOCATION_QTY: this.dynamicEditRowData.ALLOCATION_QTY
          // });
        }
      }
    },
    confirmPartQuery(checkList) {
      this.isEditShow = false;
      checkList.forEach(item => {
        item.ALLOCATION_QTY = "";
        this.tableData.push(item);
      });
    },
    // 采购数量change事件
    numChange(scope) {
      if (scope.row.ALLOCATION_QTY < 1) {
        scope.row.ALLOCATION_QTY = "";
      }
      scope.row.ALLOCATION_QTY = (scope.row.ALLOCATION_QTY + "").replace(
        /[^\d]/g,
        ""
      );
    },
    // 新增按钮 点击事件
    tableDataAdd() {
      if (!this.formField.SOURCE_WAREHOUSE) {
        this.$message({
          message: "请选择源仓库"
        });
        return;
      }
      if (!this.formField.TARGET_WAREHOUSE) {
        this.$message({
          message: "请选择目标仓库"
        });
        return;
      }
      this.isEditShow = true;
    },
    PartQueryClose() {
      this.isEditShow = false;
    },
    //  删除按钮 点击事件
    tableDataDel(index) {
      this.$confirm("您确定是否要进行此操作？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {});
    },
    querySelect() {
      let SOURCE_WAREHOUSE = this.formField.SOURCE_WAREHOUSE;
      this.formField.SOURCE_WAREHOUSE = "";
      let TARGET_WAREHOUSE = this.formField.TARGET_WAREHOUSE;
      this.formField.TARGET_WAREHOUSE = "";
      request({
        url: "/mp/wm/vl/warehouse/allocation/querySrcWarehouse.do",
        method: "post",
        data: {
          IS_ENABLE: "1"
        }
      }).then(res => {
        if (
          res.listRow &&
          res.listRow &&
          res.listRow.length > 0
        ) {
          res.listRow.map(item => {
            this.tableComponents[0].options.push({
              label: item.WAREHOUSE_NAME,
              value: item.WAREHOUSE_ID
            });
          });
          this.formField.SOURCE_WAREHOUSE = SOURCE_WAREHOUSE;
        }
      });
      request({
        url: "/mp/wm/vl/basedata/warehouseuser/queryUserByWHBox.do",
        method: "post",
        data: {
          IS_ENABLE: "1"
        }
      }).then(res => {
        if (res.listRow && res.listRow.length > 0) {
          res.listRow.map(item => {
            this.tableComponents[1].options.push({
              label: item.WAREHOUSE_NAME,
              value: item.WAREHOUSE_ID
            });
          });
          this.formField.TARGET_WAREHOUSE = TARGET_WAREHOUSE;
        }
      });
    },
    //保存
    save() {
      let flag = false;
      if (this.tableData.length < 1) {
        this.$message({
          message: "至少保存一条备件明细"
        });
        return;
      }
      this.tableData.forEach(item => {
        if (!item.ALLOCATION_QTY) {
          flag = true;
        }
      });
      if (flag) {
        this.$message({
          message: "明细中的调拨数量未输入"
        });
        return;
      }
      this.$utils.validataMoth(this, "validpopup");
      if (this.valid) {
        var saveObj = JSON.parse(JSON.stringify(this.formField));
        saveObj.saveAllocation = this.tableData;
        //保存表单
        this.saveForm(saveObj);
        storage.remove(this.$route.query.pageCode);
      }
    }
  }
};
</script>
<style type="text/css" lang="scss" scoped>
.dialogTitle {
  text-align: left;
  overflow: hidden;
}
.dialogTitleButton {
  float: right;
}
/deep/ .tableTemplate .el-input__inner {
  border: none;
}
</style>